function showTopic(content, oEvent) {
    var oTopic = document.getElementById('topic');

    oTopic.getElementsByTagName('div')[1].innerHTML = content;
    oTopic.style.display = 'block';

    setPosition(oEvent.clientX, oEvent.clientY);
}

function hideTopic() {
    var oTopic = document.getElementById('topic');

    oTopic.style.display = 'none';
}

function setPosition(x, y) {
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    var left = document.body.scrollLeft || document.documentElement.scrollLeft;

    x += left;
    y += top;

    var oTopic = document.getElementById('topic');
    var l = x + 20;
    var t = y - (oTopic.offsetHeight + 80);
    var bRight = true;
    var iPageRight = left + document.documentElement.clientWidth;

    if (l + oTopic.offsetWidth > iPageRight) {
        bRight = false;

        l = x - (oTopic.offsetWidth + 20);
        oTopic.getElementsByTagName('div')[0].className = 'adorn_r';
    } else {
        oTopic.getElementsByTagName('div')[0].className = 'adorn';
    }

    oTopic.style.left = l + 'px';
    oTopic.style.top = t + 'px';
}